CSS 按钮样式设计器

在下方输入CSS代码来实时改变按钮的样式,然后点击按钮查看效果!

✏️ CSS 命令输入

科技风
可爱风
渐变圆角
霓虹风

👁️ 实时预览

提示:您输入的CSS代码会实时应用到按钮上

💡 CSS按钮样式提示

使用这些CSS命令来设计您的按钮:

背景样式

设置背景颜色或渐变

background: #3498db; background: linear-gradient(45deg, #ff9966, #ff5e62); background: radial-gradient(circle, #00c9ff, #92fe9d);

文字样式

改变文字颜色和字体

color: white; font-size: 20px; font-family: Arial; text-shadow: 0 2px 2px rgba(0,0,0,0.3);

边框效果

设置边框和圆角

border: 2px solid #3498db; border: none; border-radius: 20px; border-radius: 5px 15px 5px 15px;

阴影效果

添加外部或内部阴影

box-shadow: 0 5px 15px rgba(0,0,0,0.2); box-shadow: inset 0 0 10px #000000; box-shadow: 0 0 20px #00ffaa;

变形效果

改变按钮形状

transform: rotate(5deg); transform: skewX(-15deg); width: 200px; height: 60px;

悬停效果

添加鼠标悬停动画

transition: all 0.4s; :hover { transform: scale(1.1); } :hover { box-shadow: 0 0 25px #ff5e62; }